<template>
	<view class="content">
		<view class="uni-panel-top">
			<image class="uni-image" src="/static/img/back.png" mode="widthFix" @click="clickBack"></image>
			<text class="uni-text-logo" :style="{'color': 'red'}">Step {{stepNo}}</text>
			<text class="uni-text-logo">第 {{showPageStr}} 组</text>
			<text class="uni-text-logo" @click="clickRandom">转乱序</text>
			<text class="uni-text-logo" @click="clickListen" v-if="stepNo==1">听力</text>
			<text class="uni-text-logo" @click="clickListenWrite" v-if="stepNo==1">听写</text>
			<text class="uni-text-logo" 
				@click="addNewWord"
				 v-if="stepNo==1">{{selectItem&&selectItem.isNewWord?'取消生词':'添加生词'}}
			</text>
			<view class="uni-panel-top-box" @click="clickLianLianKan" v-if="stepNo==1">
				<image class="uni-image-box" src="/static/img/gold.png" mode="widthFix" />
				<text class="uni-text-logo">连连看</text>
			</view>
			
			<text class="uni-text-logo" v-if="stepNo==2">剪刀收集</text>
			
			
			<text class="uni-text-logo" v-if="stepNo==3">剪纸收集</text>
			<view class="uni-panel-top-box" v-if="stepNo==3">
				<image class="uni-image-box" src="/static/img/gold.png" mode="widthFix" />
				<text class="uni-text-logo">{{goldNum}}</text>
			</view>
		</view>
		<view class="uni-panel-bottom" v-if="stepNo==1">
			<view class="uni-panel-word">
				<view class="uni-panel-item">
					<text class="uni-text-item">英文</text>
					<text class="uni-text-item">音标</text>
					<text class="uni-text-item">中文</text>
				</view>
				<scroll-view class="uni-panel" scroll-y="true">
					<view class="uni-panel-book" v-for="(item, index) in listWord" :key="index" 
					@click="clickWordItem(item)"
					:style="{'background-color': item.isSelect ? '#ddd' : 'white'}">
						<text class="uni-text-word" 
						v-if="item.isShow" 
						:style="{'color': item.isNewWord ? 'red' : 'black'}">{{item.word}}</text>
						<text class="uni-text-word-zh" v-if="item.isShowZh">{{item.phonetic}}</text>
						<text class="uni-text-word-zh" v-if="item.isShowZh">{{item.word_zh}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="uni-panel-word-right">
				<view class="uni-btn-next" @click="clickNextStep"></view>
			</view>
		</view>
		<view class="uni-panel-bottom" v-if="stepNo==2">
			<scroll-view class="uni-panel-step2-word" scroll-y="true">
				<view class="uni-panel-step2" v-for="(item, index) in listWord" :key="index"
				v-if="item.isShow"
				:animation="item.animationData"
				@transitionend="animationEnd(item)">
					<view class="uni-panel-step2-item" 
					@click="clickWordItem(item)">
						<text class="uni-text-word" 
						v-if="!item.isShowZh" 
						:style="{'color': item.isNewWord ? 'red' : 'black'}">{{item.word}}</text>
						<text class="uni-text-word-zh" v-if="item.isShowZh">{{item.phonetic}}</text>
						<text class="uni-text-word-zh" v-if="item.isShowZh">{{item.word_zh}}</text>
					</view>
					<view class="uni-btn-clipper" @click="clickClipper(item)"></view>
				</view>
			</scroll-view>
			<view class="uni-panel-word-right">
				<view class="uni-panel-box">
					<text class="uni-text-box">{{listYes.length}}</text>
				</view>
				<view class="uni-btn-next" @click="clickNextStep"></view>
			</view>
		</view>
		<view class="uni-panel-bottom" v-if="stepNo==3">
			<view class="uni-panel-bottom-left">
				<scroll-view class="uni-panel-step3-word" scroll-y="true">
					<view class="uni-panel-step2" v-for="(item, index) in listWord" :key="index"
					v-if="item.isShow"
					:animation="item.animationData"
					@transitionend="animationEnd(item)">
						<view class="uni-panel-step3-item" @click="clickWordItem(item)">
							<text class="uni-text-word" 
							v-if="!item.isShowZh" 
							:style="{'color': item.isNewWord ? 'red' : 'black'}">{{item.word}}</text>
							<text class="uni-text-word-zh" v-if="item.isShowZh">{{item.phonetic}}</text>
							<text class="uni-text-word-zh" v-if="item.isShowZh">{{item.word_zh}}</text>
						</view>
						<view class="uni-btn-yes" @click="clickYes(item)"></view>
						<view class="uni-btn-no" @click="clickNo(item)"></view>
					</view>
				</scroll-view>
				<view class="uni-panel-word-bottom">
					<view class="uni-panel-word-bottom-item">
						<text class="uni-text-box-top">yes</text>
						<view class="uni-panel-box">							
							<text class="uni-text-box">{{listYes.length}}</text>
						</view>
					</view>
					<view class="uni-panel-word-bottom-item">
						<text class="uni-text-box-top">no</text>
						<view class="uni-panel-box">							
							<text class="uni-text-box">{{listNo.length}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="uni-panel-word-right">
				<view class="uni-btn-again" @click="clickAgain"></view>
				<view class="uni-btn-next" @click="clickNextStep" v-if='!isCheck'></view>
			</view>
		</view>
		<view v-if="isShowMask" class="panel-mask">
			<view class="panel-mask-left">
				<view class="panel-mask-yes">正确率</view>
				<view class="panel-mask-yes-radio">{{yes_ratio}}%</view>
				<view class="panel-mask-complete">本次作业完成情况统计</view>
				<view class="panel-mask-state" >
					<view class="panel-mask-state-item" v-for="(item, index) in listState" :key="index">
						<view class="panel-mask-state-text">{{item.count}}</view>
						<view class="panel-mask-state-text">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="panel-mask-right">
				<view class="panel-mask-right-top">
					<view class="panel-mask-right-text">本次遗忘记录</view>
					<view class="panel-mask-right-item" v-for="(item, index) in listForget" :key="index">
						<view class="panel-mask-right-text">{{item.word}}</view>
						<view class="panel-mask-right-zh">{{item.word_zh}}</view>
					</view>
				</view>
				<view class="panel-mask-right-bottom">
					<view class="panel-mask-btn" @click="clickBack">返回</view>
					<view class="panel-mask-btn" @click="clickHistory">往期复习</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	import { addStudyLog, editNewWord, getWordInfo, getNewWordList, playMusic, addGold } from '@/api/api.js';
	import { HTTP_REQUEST_URL, VOICE_PATH, LIMIT } from '@/config/app.js';
	import store from "../../store";
	export default {
		mounted() {
		        // #ifdef APP-PLUS
		        plus.screen.lockOrientation('landscape');
		        // #endif
		    },
		data() {
			return {
				isCheck: false,
				options: {},
				listWord: [],
				newWords: [],
				allWords: [],
				dataStudy: [],
				showPage: [0],
				pageCount: 0,
				selectItem: undefined,
				isPlayMusic: false,
				listenIndex: 0,
				stepNo: 1,
				groupNo: 0,
				groupIndex: 0,
				GROUP: 3,			// 每组的页数
				listYes: [],
				listNo: [],
				listAllNo: [],		// 总的错误数
				userId: 0,
				master_id: 0,
				goldNum: 0,
				accountName: '',
				isShowMask: false,
				yes_ratio: 0,
				listState: [],
				listForget: []
			}
		},
		computed: {
			showPageStr(){
				let ret = '';
				if( this.showPage.length > 0){
					ret += (this.showPage[0] + 1)
					if( this.showPage.length > 1){
						ret += ' - ' + (this.showPage[this.showPage.length-1] + 1);
					}
				}
				return ret;
			}
		},
		onLoad(options) {
			this.options = options;
			this.book_id = parseInt(options.book_id);
			// console.log( options)
			this.isCheck = options.isCheck=='true';
			const userInfo = store.state.app.userInfo;
			if( userInfo){
				this.userId = userInfo.id;
				this.goldNum = userInfo.balance;
				this.accountName = userInfo.nickname;
			}
			this.master_id = 0;
			let student = uni.getStorageSync('student_info');
			if( student){
				this.master_id = this.userId;
				this.accountName = student.nickname;
				this.userId = student.id;
				this.goldNum = student.balance;
			}
			let params = {study_id: options.study_id, 
							user_id: this.userId, 
							book_id: this.book_id,
							newbook_id: options.newbook_id,
							is_new: options.isNewWord=='true'};
			this.allWords = [];
			getNewWordList(params).then(res => {
				if(0 == res.code){
					console.log(res)
					this.newWords = [];
					for( let item of res.data.rows){
						if( item.words){
							this.newWords = this.newWords.concat( item.words.split(','));
						}
					}
					if(params.is_new){
						this.allWords = this.newWords;
					}else{
						let words = res.data.studyWords.split(',');
						for( let word of words){
							this.allWords.push(word); 
						}
					}
					this.dataStudy = res.data.dataStudy;
					for( let item of this.dataStudy){
						item.words = item.words.split(',');
					}
					this.pageCount = Math.floor(this.allWords.length/LIMIT);
					if(this.pageCount*LIMIT < this.allWords.length){
						this.pageCount++;
					}
					if( this.isCheck){
						this.stepNo = 3;
						this.showPage = [];
						for( let i=0; i<this.pageCount; i++){
							this.showPage.push(i)
						}
					}
					// this.showPage = 0;
					this.refreshShowWord();
				}
			})
		},
		methods: {
			refreshShowWord(){
				this.listWord = [];
				for( let showPage of this.showPage){
					let showIndex = showPage * LIMIT;
					for( let i=0; i<LIMIT; i++){
						if( showIndex >= this.allWords.length){
							break;
						}
						let word = this.allWords[showIndex];
						let item = {word, isShowZh:false, isShow:true, isSelect:false, isNewWord:false, animationData: null};
						this.listWord.push(item);
						item.isNewWord = this.newWords.find( i=>i==word) != undefined;
						showIndex++;
					}
				}
			},
			clickBack(){
				uni.navigateBack();
			},
			playWord(word){
				if(!this.isPlayMusic){
					let filename = HTTP_REQUEST_URL + VOICE_PATH + word + '.mp3'
					let that = this;
					playMusic( filename, playing=>{
						that.isPlayMusic = playing;
					})
				}
			},
			clickWordItem(item, noPlayWord){
				if( !noPlayWord){
					this.playWord(item.word);
				}
				if(this.selectItem && this.selectItem != item){
					this.selectItem.isShow = true;
					this.selectItem.isShowZh = false;
					this.selectItem.isSelect = false;
				}
				this.selectItem = item;
				if(item.isSelect){
					if(item.isShow){
						if( item.word_zh){
							if(item.isShowZh && this.stepNo == 1){
								item.isShow = false;
							}
							item.isShowZh = !item.isShowZh;
						}else{
							let that = this;
							let params = {word:item.word, 
										book_id: this.book_id};
							getWordInfo(params).then(res => {
								console.log(res)
								if(res.data){
									item.word_zh = res.data.word_zh;
									item.phonetic = res.data.phonetic;
									item.isShowZh = true;
								}
							})
						}
					}else{
						item.isShow = true;
						item.isShowZh = false;
					}
				}else{
					item.isSelect = true
				}
			},
			innerAddStudyLog(isBack){
				let study_id = 0;
				if( this.options.study_id){
					study_id = this.options.study_id
				}
				let no_counts = [];
				for( let word of this.listAllNo){
					let findItem = this.dataStudy.find(item=>item.words.indexOf(word)>=0);
					if( findItem){
						let noItem = no_counts.find(item=>item.study_id==findItem.id);
						if( !noItem){
							noItem = {study_id:findItem.id, count:0};
							no_counts.push(noItem);
						}
						noItem.count += 1;
					}
				}
				let params = {user_id:this.userId, 
								book_id:this.book_id,
								study_id, 
								no_counts,
								master_id: this.master_id};
				addStudyLog(params).then(res => {
					if(0 == res.code){
						if(isBack){
							uni.navigateBack();
						}
					}else{
						uni.showToast({
						    title: res.msg,
							icon: 'none',
						    duration: 2000
						});
					}
				})
			},
			innerAddNewWord(item, is_add){
				let params = {user_id: this.userId,
								book_id: this.book_id,
								word: item.word,
								newbook_id:this.options.newbook_id,
								is_add};
				editNewWord(params).then(res => {
					//console.log(res)
					if(0 == res.code){
						item.isNewWord = is_add;
						let index = this.newWords.indexOf(params.word)
						if(params.is_add){
							if( index < 0){
								this.newWords.push(params.word)
							}
						}else{
							if( index >= 0){
								this.newWords.splice(index, 1)
							}
						}
					}else{
						uni.showToast({
						    title: res.msg,
							icon: 'none',
						    duration: 2000
						});
					}
				})
			},
			addNewWord(){
				if(this.selectItem){
					this.innerAddNewWord(this.selectItem, !this.selectItem.isNewWord);
				}
			},
			clickRandom(){
				this.listWord.sort(() => Math.random() - 0.5);
			},
			clickListen(){
				if(this.listenIndex >= this.listWord.length){
					this.listenIndex = 0;
				}
				let item = this.listWord[this.listenIndex];
				this.listenIndex++;
				this.clickWordItem(item)
				item.isShow = false;
			},
			clickListenWrite(){
				if(this.listenIndex >= this.listWord.length){
					this.listenIndex = 0;
				}
				let item = this.listWord[this.listenIndex];
				this.listenIndex++;
				item.isSelect = true;
				this.clickWordItem(item)
				item.isShow = false;
			},
			clickLianLianKan(){
				if( this.allWords.length < LIMIT){
					uni.showToast({
					    title: '至少要5个单词才能进行连连看',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				let words = ''
				for( let i=0; i<this.allWords.length; i++){
					if( i >= (this.showPage[0]+1)*LIMIT){
						continue;
					}
					let word = this.allWords[i];
					words += word + ',';
				}
				words = words.substring(0, words.length - 1);
				uni.navigateTo({
					url: '/pages/lianliankan/index?words=' + encodeURIComponent(words) + '&book_id=' + this.book_id
				});
			},
			clickNextStep(){
				let maxPage = this.showPage[this.showPage.length-1];
				if( maxPage >= this.pageCount){
					uni.showToast({
					    title: '复习完毕，请返回！',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				this.stepNo += 1;
				this.listYes = [];
				this.listNo = [];
				if( this.stepNo > 3){
					this.stepNo = 1;
					this.groupIndex += 1;
					if( maxPage+1 >= this.pageCount){
						if( this.groupIndex < this.GROUP){
							this.groupIndex = this.GROUP
						}
					}else{
						this.showPage = [maxPage + 1];
					}
					if( this.groupIndex >= this.GROUP){
						if( this.groupIndex == this.GROUP){
							this.showPage = [];
							for( let i=0; i<this.GROUP; i++){
								let pageIndex = i + this.groupNo * this.GROUP;
								if( pageIndex >= this.pageCount){
									break;
								}
								this.showPage.push(pageIndex);
							}
						}else{
							this.groupNo += 1;
							this.groupIndex = 0;
							let nextPage = this.groupNo * this.GROUP;
							this.showPage = [nextPage];
							if( nextPage >= this.pageCount){
								this.innerAddStudyLog(true);
							}
						}
					}
					this.refreshShowWord();
				}
				this.clickAgain()
				this.selectItem = undefined
				if( this.listWord.length > 0){
					this.playWord(this.listWord[0].word);
				}
			},
			clickClipper(item){
				item.isSelect = true;
				this.clickWordItem(item, true);
				setTimeout(()=>{
					this.beginAnimation(item);
				}, 500);
			},
			beginAnimation(item){
				this.selectItem = undefined;
				const engAnimation = uni.createAnimation();
				engAnimation.translate(-600, 0).step({duration:100});
				//engAnimation.opacity( 0).step({duration:1})
				engAnimation.translate( 0, 0).step({duration:1})
				item.animationData = engAnimation.export();
			},
			animationEnd(item){
				if( !item.animationData){
					return;
				}
				item.animationData = null;
				if( item.isNo){
					this.addYesNo( this.listNo, this.listYes, item.word);
					this.addYesNo( this.listAllNo, undefined, item.word);
					item.isNo = undefined;
					let index = this.listWord.indexOf(item);
					if (index >= 0) {
						// 放到尾部
						this.listWord.splice(index, 1);
						item.isShowZh = false;
						this.listWord.push(item);
						//console.log(this.listWord)
					}
				}else{
					this.addYesNo( this.listYes, this.listNo, item.word);
					item.isShow = false;
				}
				let isEnd = true;
				for( let item of this.listWord){
					if( item.isShow){
						isEnd = false;
						this.playWord(item.word);
						break;
					}
				}
				let all = this.listWord.length;
				if( isEnd && this.isCheck && all > 0){
					this.innerAddStudyLog();
					this.listState.push({name:'需复习', count: all});
					this.listState.push({name:'已复习', count: all});
					this.listState.push({name:'未复习', count: 0});
					let err = this.listAllNo.length;
					let correct = all - err;
					this.yes_ratio = parseInt(correct*100/all);
					for( let word of this.listAllNo){
						let findItem = this.listWord.find( item=>item.word==word);
						if( findItem){
							this.listForget.push(findItem);
						}
					}
					this.isShowMask = true;
				}
			},
			addYesNo(listAdd, listDel, word){
				if( listDel){
					let indexDel = listDel.indexOf(word);
					if (indexDel >= 0) {
						listDel.splice(indexDel, 1);
					}
				}
				let indexAdd = listAdd.indexOf(word);
				if (indexAdd < 0) {
					listAdd.push(word)
				}
			},
			clickAgain(){
				for( let item of this.listWord){
					item.isShow = true;
					item.isShowZh = false;
				}
			},
			clickYes(item){
				this.clickClipper(item);
				let params = {id: this.userId, addGoldNum:1};
				addGold(params).then(res => {
					if( 0 == res.code){
						this.goldNum += 1;
						store.commit('changInfo', {
							amount1:'balance', 
							amount2:this.goldNum,
						});
					}
				})
			},
			clickNo(item){
				item.isNo = true;
				this.clickClipper(item);
				this.innerAddNewWord(item, true);
			},
			clickHistory(){
				uni.navigateTo({
					url: "/pages/history/index"
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		background-image: url('../../static/img/bg.jpg');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}
	
	.uni-panel-top {
		width: 90%;
		height: 15%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.uni-panel-top-page {
		width: 20%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.uni-image-page-left {
		width: 15%;
		transform: rotate(180deg);
	}
	.uni-image-page{
		width: 15%;
	}
	
	.uni-image {
		width: 6%;
	}
	.uni-text-logo{
		white-space: nowrap;
		color: white;
		font-size: 4vmin;
		margin-left: 5%;
		text-align: center;
		font-weight: bold;
		text-shadow:
		    -1px -1px 0 #000,
		    1px -1px 0 #000,
		    -1px 1px 0 #000,
		    1px 1px 0 #000; /* 调整偏移量和颜色来设置描边宽度和颜色 */
	}
	.uni-image-box {
		width: 8vmin;
	}
	.uni-panel-top-box {
		margin-left: 6%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.uni-panel-bottom {
		width: 90%;
		height: 80%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.uni-panel-word {
		width: 90%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.uni-panel-item {
		background-color: whitesmoke;
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.uni-text-item{
		font-size: 4vmin;
		color: royalblue;
		letter-spacing: 2rpx;
		margin: 0 2%;
		font-weight: bold;
	}
	
	.uni-panel {
		width: 100%;
		height: 65vmin;
		display: flex;
		flex-direction: column;
	}
	
	.uni-panel-book {
		height: 12vmin;
		width: 100%;
		margin-top: 1vmin;
		border-radius: 5vmin;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.uni-panel-book-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.uni-word-image {
		width: 40rpx;
	}
	
	.uni-text-word{
		font-size: 6vmin;
		color: black;
		margin: 0 4vmin;
	}
	.uni-text-word-zh{
		font-size: 4vmin;
		color: black;
		margin: 0 4vmin;
		white-space: nowrap;
	}
	.uni-panel-word-right{
		display: flex;
		flex-direction: row;
		margin-top: 64vmin;
		margin-left: 4vmin;
	}
	.uni-btn-next{
		width: 14vmin;
		height: 10vmin;
		margin-left: 4vmin;
		background-image: url('../../static/img/next.png');
		background-size: 100% 100%;
	}
	
	.uni-panel-step2-word {
		width: 80%;
		height: 65vmin;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.uni-panel-step2 {
		height: 13vmin;
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	.uni-panel-step2-item{
		width: 90%;
		background-image: url('../../static/img/bg_word.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.uni-btn-clipper{
		width: 17vmin;
		height: 13vmin;
		margin-left: 2%;
		background-image: url('../../static/img/clipper.png');
		background-size: 100% 100%;
	}
	.uni-panel-box{
		width: 15vmin;
		height: 15vmin;
		margin-left: 2vmin;
		background-image: url('../../static/img/bg_box.png');
		background-size: 100% 100%;
	}
	.uni-text-box{
		position: relative;
		left: 8vmin;
		top: 2vmin;
		color: white;
		font-size: 4vmin;
	}
	.uni-text-box-top{
		position: relative;
		top: 3vmin;
		color: red;
		font-size: 4vmin;
		font-weight: bold;
	}
	
	.uni-panel-bottom-left {
		width: 80%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.uni-panel-step3-word {
		width: 100%;
		height: 65vmin;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.uni-panel-step3-item{
		width: 80%;
		background-image: url('../../static/img/bg_word.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.uni-btn-yes{
		width: 16vmin;
		height: 13vmin;
		margin-left: 2%;
		background-image: url('../../static/img/yes.png');
		background-size: 100% 100%;
	}
	.uni-btn-no{
		width: 16vmin;
		height: 13vmin;
		margin-left: 2%;
		background-image: url('../../static/img/no.png');
		background-size: 100% 100%;
	}
	.uni-btn-again{
		width: 14vmin;
		height: 10vmin;
		margin-left: 4vmin;
		background-image: url('../../static/img/again.png');
		background-size: 100% 100%;
	}
	.uni-panel-word-bottom{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.uni-panel-word-bottom-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -3vmin;
	}
	
	.panel-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('../../static/img/bg.jpg');
		background-size: 100% 100%;
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.panel-mask-left {
		margin-top: 15vmin;
		margin-left: 10vmin;
		width: 70vmin;
		height: 70vmin;
		background-image: url('../../static/img/bg_report.jpg');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
	}
	.panel-mask-yes {
		margin-top: 11vmin;
		width: 100%;
		height: 5vmin;
		text-align: center;
		font-size: 3vmin;
	}
	.panel-mask-yes-radio {
		width: 100%;
		height: 5vmin;
		text-align: center;
		color: orange;
		font-size: 4vmin;
	}
	.panel-mask-complete {
		margin-top: 18vmin;
		width: 100%;
		height: 5vmin;
		text-align: center;
		font-size: 4vmin;
	}
	.panel-mask-state {
		margin-top: 11vmin;
		margin-left: 12%;
		width: 76%;
		height: 12vmin;
		display: flex;
		flex-direction: row;
	}
	.panel-mask-state-item{
		display: flex;
		flex-direction: column;
		width: 33%;
		height: 100%;
	}
	.panel-mask-state-text{
		text-align: center;
		font-size: 4vmin;
	}
	
	.panel-mask-right {
		margin-top: 15vmin;
		margin-left: 10vmin;
		width: 70vmin;
		height: 70vmin;
		display: flex;
		flex-direction: column;
	}
	.panel-mask-right-top {
		width: 100%;
		height: 70%;
		border-radius: 2vmin;
		background-color: white;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}
	.panel-mask-right-item{
		display: flex;
		flex-direction: column;
	}
	.panel-mask-right-text{
		height: 6vmin;
		display: flex;
		align-items: center;
		margin-left: 2vmin;
		font-size: 4vmin;
	}
	.panel-mask-right-zh{
		height: 4vmin;
		color: grey;
		margin-left: 1vmin;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 3vmin;
	}
	.panel-mask-right-bottom{
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.panel-mask-btn{
		background-image: url('../../static/img/bg_btn.png');
		background-size: 100% 100%;
		margin: 10% 5%;
		width: 40%;
		height: 16vmin;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 5vmin;
		color: cadetblue;
	}
</style>
